<template>
    <div class="loginontainer">
        <div class="loginPanel">
            <el-card class="login-card" :body-style="{ padding: '20px', height: '100%' }">
                <h2 class="login-title">用户登录</h2>

                <!-- 表单 -->
                <el-form :model="form" :rules="rules" @keydown.enter="handleLogin" ref="formRef"
                    style="height: 86%; padding-right: 6%;" label-width="80px">
                    <!-- 账号输入框 -->
                    <el-form-item label="账号" prop="username">
                        <el-input size="large" v-model="form.username" placeholder="请输入账号" />
                    </el-form-item>

                    <!-- 密码输入框 -->
                    <el-form-item label="密码" prop="password">
                        <el-input size="large" v-model="form.password" type="password" placeholder="请输入密码" />
                    </el-form-item>

                    <!-- 登录按钮 -->
                    <el-form-item>
                        <el-button type="primary" size="large" @click="handleLogin" :loading="loading"
                            style="width: 100%">
                            登录
                        </el-button>
                    </el-form-item>

                    <!-- 忘记密码和注册账号链接 -->
                    <el-form-item>
                        <div class="footer-links">
                            <a href="#" @click.prevent="handleForgotPassword">忘记密码</a>
                            <a href="#" @click.prevent="handleRegister">注册账号</a>
                        </div>
                    </el-form-item>
                </el-form>
            </el-card>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { ElForm, ElFormItem, ElInput, ElButton, ElCard, ElMessage } from 'element-plus';
import Cookies from 'js-cookie';
import { useRouter } from 'vue-router';

import { login } from '@/api';

export default defineComponent({
    name: 'Login',
    components: {
        ElForm,
        ElFormItem,
        ElInput,
        ElButton,
        ElCard
    },
    setup() {
        const form = ref({
            username: '',
            password: ''
        });
        const router = useRouter();  // 获取路由实例
        const loading = ref(false); // 控制按钮的加载状态
        const formRef = ref(null); // 表单引用

        const rules = {
            username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
            password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
        };

        // 表单提交处理
        const handleLogin = async () => {
            // 使用 formRef 触发表单验证
            try {
                await formRef.value?.validate();
                loading.value = true;

                // 模拟登录请求

                login(form.value).then(res => {
                    console.log(res);
                    loading.value = false;
                    if (res['code'] === 200) {
                        ElMessage.success("登录成功！")
                        router.push({ name: 'home' })
                        // 可以在这里保存 token 到 Cookie  默认保存七天
                        Cookies.set('token', res.data.access_token, { expires: 7 });

                    } else {
                        ElMessage.error(res['msg'])
                    }

                })
            } catch (error) {
                ElMessage.error("表单验证失败", error)
            }
        };

        // 忘记密码事件处理
        const handleForgotPassword = () => {
            const username = form.value.username;
            if (username) {
                router.push({ name: 'forget', query: { username } });
            } else {
                ElMessage.error("请填写您的账号！")
            }

        };

        // 注册账号事件处理
        const handleRegister = () => {
            router.push({ name: 'register' });
        };

        return {
            form,
            loading,
            formRef,
            rules,
            handleLogin,
            handleForgotPassword,
            handleRegister
        };
    }
});
</script>

<style lang="scss" scoped>
.loginontainer {
    width: 100%;
    height: 100%;
    background: url('../../assets/image/login.png') 50% no-repeat;
    background-size: 100% 100%;
    position: relative;

    .loginPanel {
        position: absolute;
        width: 26%;
        height: 35%;
        background-color: #fff;
        border-radius: 10px;
        right: 10%;
        top: 23%;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

        .login-card {
            width: 100%;
            height: 100%;
        }

        .login-title {
            text-align: center;
            margin-bottom: 20px;
        }

        .footer-links {
            text-align: center;
        }

        .footer-links a {
            margin: 0 10px;
            text-decoration: none;
            color: #409eff;
        }

        .footer-links a:hover {
            text-decoration: underline;
        }
    }
}
</style>